<template>
  <div class="cashPop" ref="cashPop">
    <div class="cashPop-main">
      <div class="cashPop_close">
        <!-- 余额提现 -->
        {{cashPopData.popTitle || '余额提现'}}
        <i @click="closeCashPop"></i>
      </div>
    </div>
    <div class="cashPop-main" v-if="jzb_is_opened==0 && tlfz_is_opened==0">
      <div class="balance_inputinfo" v-if="is_id_card!=0 && otherApply!=2">
        <div class="inputinfo">
          <span>身份证姓名</span>
          <input type="text"
            placeholder="请填写您的真实姓名"
            v-model="id_card_name"
            @blur="scroll0" />
        </div>
        <div class="inputinfo inputinfo_bn">
          <span>身份证号</span>
          <input type="text"
            placeholder="请填写您的身份证号"
            v-model="id_card"
            @blur="scroll0" />
        </div>
      </div>
      <div class="balance_inputinfo" v-if="id_card_front_back!=0 && otherApply!=2">
        <div class="upload" style="border:0;">
          <h3>身份证照片上传</h3>
          <div class="upload_box">
            <div class="upload_box_item">
              <SmallUploadImg ref="smallUploadImg1" :isUploadSfz="isUploadSfz" :sfzBg="front_img" :maxLength="maxLength"></SmallUploadImg>
              <div class="add-text">身份证正面</div>
            </div>
            <div class="upload_box_item">
              <SmallUploadImg ref="smallUploadImg2" :isUploadSfz="isUploadSfz" :sfzBg="back_img" :maxLength="maxLength"></SmallUploadImg>
              <div class="add-text">身份证反面</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="cashCard" v-if="jzb_is_opened==1">
      <div class="cashCard-main" v-if="jzb_bank">
        <div class="card-wrap-title">{{jzb_bank.bank_name}}银行</div>
        <div class="card-wrap-num">{{jzb_bank.bank_number}}</div>
        <!-- <div class="card-wrap-tip">提现最低额度为10</div> -->
        <div class="card-wrap-btn" @click="Jump('bindCard')">
          <span>查看银行卡</span>
        </div>
      </div>
      <div class="cashCard-main" v-else>
        <div class="card-wrap-title">银行名称</div>
        <div class="card-wrap-num">银行卡号</div>
        <div class="card-wrap-btn" @click="Jump('bindCard')">
          <span>绑定银行卡</span>
        </div>
      </div>
    </div>

    <!-- 通联分账 -->
    <div class="cashCard" v-if="tlfz_is_opened==1">
      <div class="cashCard-main" v-if="tlfz_member_info.tlfz_bind_bank && tlfz_member_info.tlfz_bind_bank.length>0">
        <div class="card-wrap-title">银行卡号</div>
        <div class="card-wrap-num">{{tlfz_member_info.tlfz_bind_bank[0].card_no}}</div>
        <!-- <div class="card-wrap-btn" @click="Jump('/mb/user/bindCard')">
          <span>查看银行卡</span>
        </div> -->
      </div>
      <!-- <div class="cashCard-main" v-else>
        <div class="card-wrap-title">银行名称</div>
        <div class="card-wrap-num">银行卡号</div>
        <div class="card-wrap-btn" @click="Jump('/mb/user/bindCard')">
          <span>绑定银行卡</span>
        </div>
      </div> -->
    </div>

    <div class="cashPop-main">
      <div v-if="jzb_is_opened==0 && tlfz_is_opened==0">
        <div class="select-pay-type clearfix">
          <div class="pay-title">到账账户</div>
          <div class="big_pay_type clearfix" :key="'pay_type'">
            <div class="payList yun" v-if="isWithdrawType(4)">
              <div :class="active==4?'active':''" @click="setActive(4)">
                <img :src="yunImg" alt />
                <span>云账户</span>
                <i></i>
              </div>
            </div>
            <div v-else class="payList">
              <div v-if="isWithdrawType(2)" :class="active==2?'active':''" @click="setActive(2)">
                <img :src="wxImg" alt />
                <span>微信</span>
                <i></i>
              </div>
              <div v-if="isWithdrawType(1)" :class="active==1?'active':''" @click="setActive(1)">
                <img :src="zfbImg" alt />
                <span>支付宝</span>
                <i></i>
              </div>
              <div v-if="isWithdrawType(3)" :class="active==3?'active':''" @click="setActive(3)">
                <img :src="ylImg" alt />
                <span>银联</span>
                <i></i>
              </div>
            </div>
          </div>
          <div class="cloud_pay" v-show="isWithdrawType(4)" :key="'dz_cloud_pay_type'">
            <label
              v-if="in_array(1)"
              :class="[cloud_type == 1 ? 'checked' : '']"
              @click="setActive(1,'dz')"
            >
              <img :src="zfbImg" alt />支付宝
            </label>
            <label
              v-if="in_array(2)"
              :class="[cloud_type == 2 ? 'checked' : '']"
              @click="setActive(2,'dz')"
            >
              <img :src="wxImg" alt />微信
            </label>
            <label
              v-if="in_array(3)"
              :class="[cloud_type == 3 ? 'checked' : '']"
              @click="setActive(3,'dz')"
            >
              <img :src="ylImg" alt />银联
            </label>
          </div>
        </div>
        <div v-if="(active == 3 && otherApply!=2) || (active == 4 && cloud_type == 3)" class="pay-yinhang">
          <div class="formitems">
            <div class="fi-name">
              <span class="colorRed">*</span>到账银行卡
            </div>
            <div class="form-controls">
              <div class="selc-style">
                <span>{{bankName}}</span>
                <i class="icon-right"></i>
              </div>
              <select name="bank_id" class="select" v-model="bank">
                <option value="0" selected>--请选择--</option>
                <option
                  v-for="(val,key,index) in cashPopData.bankList"
                  :key="index"
                  :value="key"
                >{{val}}</option>
              </select>
            </div>
          </div>
        </div>
        <div
          v-if="(active == 3 && otherApply!=2) || (active == 4 && cloud_type == 3)"
          class="balance_inputinfo pay-yinhang"
        >
          <div class="inputinfo">
            <span>开户行</span>
            <input
              type="text"
              placeholder="请填写开户行"
              data-bank="{$user_behavior_jd.open_bank}"
              v-model="open_bank"
              @blur="scroll0"
            />
          </div>
        </div>
        <div
          v-if="(active == 4 && cloud_type != 2) || (active == 3 && otherApply!=2) || (active!=2 && active !=4 && active != 3)"
          class="balance_inputinfo pay-yinhang"
          :class="[active==1?'zfbpay':'']"
        >
          <div class="inputinfo inputinfo_bn">
            <span>账户</span>
            <input type="text" placeholder="请填写账号" v-model="alipay_account" @blur="scroll0" :disabled="(otherApply==2?true:false)" />
          </div>
        </div>
      </div>

      <!-- 定制 漫威 门店提现 start -->
      <div v-if="dzData.is_mw_dz"
           class="balance_inputinfo">
        <div class="formitems">
          <p class="fi-name">
            <i class="colorRed">*</i>
            <span v-if="dzData.store_info_dz">您提现的门店：{{dzData.shop_name}}</span>
            <span v-else>对不起，由于您没有门店，所以暂时无法提现。</span>
          </p>
        </div>
      </div>
      <!-- 定制 漫威 门店提现 end -->
      <div class="balance_inputinfo">
        <div class="money_number">
          <h3>提现金额</h3>
          <p>
            <b>{{mSymbol.name}}</b>
            <input type="text"
              placeholder="请输入提现金额"
              v-model="money"
              @blur="scroll0" />
          </p>
          <!-- 见证宝获取验证码 -->
          <p class="phone-code" v-if="jzb_is_opened==1&&inToOutParam.isShow">
            <input class="phone-code-input" type="text" placeholder="输入验证码" v-model="inToOutParam.MessageCode" />
            <button class="phone-code-get" @click="onGetPhoneCodeClick">获取验证码</button>
          </p>
          <div>
            <span>温馨提示</span>
            <p class="Tips"
               style="line-height: 20px;font-size: 13px;color: #999;font-weight: normal;border:0;">{{cashPopData.draw_alert}}</p>
          </div>
        </div>
      </div>
      <div class="balance_inputinfo" v-if="jzb_is_opened==0 && tlfz_is_opened==0">
        <div class="inputinfo" v-if="otherApply!=2">
          <span>账户姓名</span>
          <input type="text"
                 placeholder="请填写您的真实姓名"
                 v-model="balanceName"
                 @blur="scroll0" />
        </div>
        <div v-if="active == 2 && cashPopData.is_commission"
             class="inputinfo inputinfo_bn">
          <span>微信账号</span>
          <input type="text"
                 placeholder="请填写您提现的微信账号(非必填)"
                 v-model="wx_account_name"
                 @blur="scroll0" />
        </div>
        <!-- 喜美恩 微信提现 start -->
        <div v-if="active == 2 && dzData.is_xmn"
             class="inputinfo inputinfo_bn">
          <span>微信账号</span>
          <input type="text"
                 placeholder="请填写您提现的微信账号"
                 v-model="wx_account_name"
                 @blur="scroll0" />
        </div>
      </div>
      <div class="balance_inputinfo" v-if="withdraw_need_phone == 1">
        <div class="inputinfo">
          <span>手机号码</span>
          <input type="text"
                 placeholder="请填写您的手机号码"
                 v-model="link_mobile"
                 @blur="scroll0" />
        </div>
      </div>
      <balance-text v-if="cashPopData.is_balance"
        :cashPopData="cashPopData"
        :money="money"></balance-text>

      <!-- 通联分账不展示手续费信息 -->
      <commission-text v-else-if="cashPopData.is_commission && tlfz_is_opened==0"
        :cashPopData="cashPopData"
        :money="money"
        :active="active"
        :isWithdrawType="isWithdrawType"
        :in_array="in_array"></commission-text>
      <supplier-withdraw-text v-else-if="cashPopData.is_supplierWithdraw && tlfz_is_opened==0"
        :cashPopData="cashPopData"
        :money="money"></supplier-withdraw-text>

      <!-- 定制  梦泉 云账户 start -->
      <div v-if="isAgreenment">
        <section class="apply_cloud_agreement"
                 v-show="active == 4 ">
          <van-checkbox v-model="mq_agree"
                        checked-color="#E80001"
                        icon-size="16px"
                        ref="showAgreenment">
            <p style="color: #000">
              我已阅读并同意以下协议
            </p>
          </van-checkbox>
          <a v-if="dzData.agreement_name"
              style="color:#999;text-decoration:underline;"
              @click="Jump('protocolList')">{{dzData.agreement_name}}</a>
          <a v-else
              style="color:#999;text-decoration:underline;"
              @click="Jump('protocolList')">{{is_mq ? '梦泉' : '云账户'}}结算协议</a>
        </section>
      </div>
      <!-- 定制  梦泉 云账户 end -->
      <section class="old_apply_agreement"
               v-if="oldAgreenment"
               v-show="active != 4">
        <span class="agreenment">
          <van-checkbox v-model="agree"
                        checked-color="#E80001"
                        icon-size="16px"
                        ref="showOldAgreenment">
            <p style="color: #000">
              我已阅读并同意
            </p>
          </van-checkbox>
          <span class="J-showAgreement3-title"
                  @click="showOldAgreement">{{cashPopData.withdraw_agreement_name}}</span>
        </span>
      </section>
      <div class="count_node clearfix">
        <div>
          <!-- 定制  门店提现 start -->
          <span v-if="dzData.is_mw_dz && !dzData.store_info_dz"
                :key="'is_mw_dz'"
                class="count-btn count-ico no-store"
                @click="noStore()">申请提现</span>
          <span v-else
                @click="clickTxBtn"
                class="count-btn count-ico"
                :key="'wfx'">申请提现</span>
        </div>
      </div>
    </div>
    <van-dialog v-model="showPwd"
      title="请输入支付密码"
      show-cancel-button
      confirm-button-color="#E80001"
      @confirm="confirm">
      <input v-model="password"
        type="password"
        name="password"
        class="password" />
    </van-dialog>

    <!-- 通联验证码弹窗确认提现 -->
    <!-- <van-dialog
      v-model="showTlDialog"
      title="确认提现"
      :show-confirm-button="false"
      :show-cancel-button="false"
      close-on-click-overlay
      class="common-confirm"
    >
      <div class="donation-box">
				<div class="con-box">
					<div class="input-box clearfix">
						<label for="">手机号码：</label><input class="readonly" type="number" name="tlMobile" value="18957147969" readonly/>
					</div>
					<div class="input-box clearfix">
						<label for="">验证码：</label><input type="number" name="tlCode" v-model="formTlDialog.code"/>
					</div>
				</div>
        <div class="btn-box">
          <div class="btn cancel-btn" @click="closeTlDialog">取消</div>
          <div class="btn confirm-btn" @click="clickTlConfirm">确认</div>
        </div>
			</div>
    </van-dialog> -->
    <!-- 协议 -->
    <van-popup
      v-model="showAgreement"
      position="bottom"
      closeable
      @close="closeOldAgreement"
      :style="{ height: '100%' }"
    >
      <div class="agreement-cont">
        <div
             class="apply_agreement old_apply_agreement">
          <section class="txt">
            <p v-html="cashPopData.withdraw_apply_agreement"></p>
          </section>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import Vue from 'vue'
import commissionText from './commission/index'
import balanceText from './balance/index'
import supplierWithdrawText from './supplierWithdraw/index'
import { IdentityCodeValid, validateMobile } from '@/utils/validate'
import { checkedPayPassword, getBalanceDraw } from '@/api/user/member/memberApi'
import { doTX, reqPostJzbSubInfo, reqPostJzbPayCode, reqPostJzbTransactionMsg } from '@/api/user/fxs/fxsApi'
import { doSupplierWithdraw } from '@/api/user/gys/gysApi'
import Storage from '@/utils/store.js'
import SmallUploadImg from '@/components/SmallUploadImg'
import { mapGetters } from 'vuex'
import small from '@/smallapp/small'

import { Checkbox } from 'vant'

Vue.use(Checkbox)
export default Vue.extend({
  components: {
    commissionText,
    balanceText,
    supplierWithdrawText,
    SmallUploadImg
  },
  props: {
    dzData: {
      type: Object,
      default: () => {
        const Obj = {
          is_mq_cloud: false,
          is_mw_dz: false
        }
        return Obj
      }
    },
    cashPopData: Object,
    otherApply: {
      type: [String, Number],
      default: 0
    }
  },
  data() {
    return {
      isUploadSfz: true,
      maxLength: 1,
      wxImg: 'https://img.wifenxiao.com/h5-wfx/images/user/Pay/wx.png',
      zfbImg: 'https://img.wifenxiao.com/h5-wfx/images/user/Pay/zfb.png',
      ylImg: 'https://img.wifenxiao.com/h5-wfx/images/user/Pay/yl.png',
      yunImg: 'https://img.wifenxiao.com/h5-wfx/images/user/Pay/yzf.png',
      active: '',
      bank: '',
      bankName: '请选择银行',
      balanceName: '', // 姓名
      id_card: '',
      showPwd: false, // 支付密码弹框
      password: '',
      agree: true,
      mq_agree: true,
      showAgreement: false,
      is_id_card: null, // 是否开启需要填写身份证号码和姓名
      id_card_front_back: null, // 是否开启上传身份证正反面
      withdraw_need_phone: null, // 是否需要填写手机号
      id_card_name: '', // 身份证姓名
      id_card: '', // 身份证号
      front_img: '', // 身份证正面照片
      back_img: '', // 身份证反面照片
      alipay_account: '', // 账户
      wx_account_name: '', // 微信账号
      link_mobile: '', // 手机号
      money: '',
      open_bank: '', // 开户行
      code: null,
      is_mq: false,
      cloud_type: null, // 梦泉 云支付  支付方式
      user_behavior_jd: null,
      user_behavior_wechat: null,
      user_behavior_alipay: null,
      // 梦泉  云支付
      cloud_default_1: null,
      cloud_default_2: null,
      cloud_default_3: null,
      inToOutParam: {
        'TranAmount': '',
        'SerialNo': '',
        'MessageCode': '',
        'isShow': true,
        'cash': ''
      },
      jzb_is_opened: -1,
      jzb_bank: {},
      tlfz_is_opened: 0, // 通联分账
      tlfz_member_info: {},
      tlfzParams: {
        MessageCode: ''
      },
      withdraw_need_phone: null, // 是否需要填写手机号
      link_mobile: '', // 手机号
      // showTlDialog: false,
      // formTlDialog: {
      //   verification_code: '',
      //   biz_order_no: ''
      // }
      // xmnDzData: {}
    }
  },
  created() {
    this.init()
    let shop = small.globalData.shopId
    const mq_dz = this.$_shop('$_mq_cloud', shop)
    this.is_mq = mq_dz
  },
  methods: {
    scroll0() {
      window.scroll(0, 0)
      this.$refs.cashPop.scroll(0, 0)
    },
    init() {
      if (this.isWithdrawType(3)) this.active = 3
      if (this.isWithdrawType(1)) this.active = 1
      if (this.isWithdrawType(2)) this.active = 2
      if (this.isWithdrawType(4)) this.active = 4
      this.user_behavior_jd = this.cashPopData.user_behavior_jd
      this.user_behavior_wechat = this.cashPopData.user_behavior_wechat
      this.user_behavior_alipay = this.cashPopData.user_behavior_alipay
      // this.jzb_is_opened = this.cashPopData.jzb_is_opened
      this.is_id_card = this.cashPopData.is_id_card
      this.id_card_front_back = this.cashPopData.id_card_front_back
      this.withdraw_need_phone = this.cashPopData.withdraw_need_phone
      // console.log(this.cashPopData)
      // console.log('withdraw_need_phone:', this.withdraw_need_phone)
      // 回显
      if (this.cashPopData.last_withdraw_info) {
        const popData = this.cashPopData.last_withdraw_info
        // console.log('popData', popData, this.active)
        this.alipay_account = popData.alipay_account
        this.bank_type = popData.bank_type
        this.wx_account_name = popData.wx_account_name
        this.balanceName = popData.payee
        this.id_card = popData.id_card
        this.id_card_name = popData.id_card_name
        this.front_img = popData.id_card_front
        this.back_img = popData.id_card_back
        this.bank = popData.bank_id
        this.link_mobile = popData.link_mobile
        // this.open_bank = popData.open_bank
        this.bankName = popData.bank_name
      }
      if (this.cashPopData.jzb_is_opened) {
        this.jzb_is_opened = this.cashPopData.jzb_is_opened
      } else {
        this.jzb_is_opened = 0
      }
      // // console.log('jzb_is_opened:', this.jzb_is_opened)
      // 开通了见证宝
      if (this.jzb_is_opened == 1) {
        // console.log('jzb_is_opened: true')
        this.active = 6

        // 苏乃文说：修复见证宝佣金与微分销佣金不一致，以及修复为分账订单,不用处理接口返回结果
        queryAndAddDifference().then(res => {
          // console.log(res)
        })
        reqPostJzbSubInfo().then(res => {
          const cash = res.data.sub_info.SubAcctAvailBal
          this.inToOutParam.TranAmount = cash
          if (Number(this.inToOutParam.TranAmount) <= 0) {
            this.inToOutParam.isShow = false
          } else {
            this.inToOutParam.isShow = true
          }
          // console.log('jzb_is_opened: isShow: ', this.inToOutParam.isShow)
        }).catch(_ => {})
      } else {
        this.inToOutParam.isShow = false
      }
      this.jzb_bank = this.cashPopData.jzb_bank

      // 通联分账active为7
      this.tlfz_is_opened = this.cashPopData.tlfz_is_opened || 0
      if (this.tlfz_is_opened == 1) {
        this.active = 7
      }
      this.tlfz_member_info = this.cashPopData.member_info

      this.cloud_default_1 = this.dzData.cloud_default_1
      this.cloud_default_2 = this.dzData.cloud_default_2
      this.cloud_default_3 = this.dzData.cloud_default_3
      this.bank = this.user_behavior_jd && this.user_behavior_jd.bank_id ? this.user_behavior_jd.bank_id : 0 // 默认银行id
      this.open_bank = this.user_behavior_jd
        ? this.user_behavior_jd.open_bank
        : '' // 默认银行名称
      this.code = this.cashPopData.code
      this.cloud_type = this.dzData.cloud_type
    },
    closeCashPop() {
      this.$emit('closePop')
    },
    showOldAgreement() {
      // this.agree = !this.agree
      // // 定位到协议正文
      // if (!this.agree) {
      //   this.$nextTick(() => {
      //     const applyAgreement = document.querySelector('.agreement-cont .apply_agreement')
      //     if (applyAgreement) {
      //       const scrollTop = document.querySelector('.agreement-cont').offsetTop
      //       document.querySelector('.cashPop').scrollTop = scrollTop
      //     }
      //   })
      // }
      this.showAgreement = true
      this.closeAlert = false
    },
    closeOldAgreement() {
      this.showAgreement = false
      this.closeAlert = true
    },
    isWithdrawType(type) {
      const index = this.cashPopData.withdraw_type.findIndex(item => {
        return item == type
      })
      return index == -1 ? 0 : 1
    },

    setActive(type, is_dz) {
      is_dz ? (this.cloud_type = type) : (this.active = type)
    },

    // uploadImg 抛出的图片参数
    uploadIdCard(file, type) {
      const form = new FormData()
      // console.log(file, 1222)
      form.append('file', file)
      uploadImgs(form).then(res => {
        const picUrl = res.data.pic_url
        if (res.status === 1) {
          if (type == 'front') {
            this.front_img = picUrl
          } else if (type == 'back') {
            this.back_img = picUrl
          }
        } else {
          Toast('上传失败, 请重新上传')
        }
      }).catch(() => {
        Toast('上传失败, 请重新上传')
      })
    },
    // 身份证正面
    frontChange() {
      const frontInputDOM = this.$refs.input_front
      const uploadType = 'front'
      // 通过DOM取文件数据
      const uploadFile = frontInputDOM.files[0]
      // console.log(uploadFile)
      this.uploadIdCard(uploadFile, uploadType)
    },
    backChange() {
      const backInputDOM = this.$refs.input_back
      const uploadType = 'back'
      // 通过DOM取文件数据
      const uploadFile = backInputDOM.files[0]
      // console.log(uploadFile)
      this.uploadIdCard(uploadFile, uploadType)
    },

    /**
     * 见证宝：获取手机验证码
     */
    onGetPhoneCodeClick() {
      reqPostJzbPayCode({
        'TranAmount': this.inToOutParam.TranAmount
      }).then(res => {
        if (res.status == 1) {
          this.$Error('手机验证码已发送')
          this.inToOutParam.SerialNo = res.data.pay_code.MessageOrderNo
        } else {
          this.$Error(res.msg)
        }
      }).catch(_ => {})
    },
    /**
     * 见证宝：入金转到出金
     * @param {function} cb callback
     */
    handleInToOutClick(cb) {
      if (!this.inToOutParam.MessageCode) {
        this.$Error('请输入手机验证码！')
        return
      }
      reqPostJzbTransactionMsg({
        'TranAmount': this.inToOutParam.TranAmount,
        'SerialNo': this.inToOutParam.SerialNo,
        'MessageCode': this.inToOutParam.MessageCode
      }).then(res => {
        if (res.status == 1) {
          typeof cb == 'function' && cb(res)
        } else {
          this.$Error(res.msg)
        }
      }).catch(_ => {})
    },
    // 申请提现按钮
    clickTxBtn() {
      const m = /^1\d{10}$/
      const e = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
      // 不是见证宝且不是通联分账
      if (this.active != 6 && this.active != 7) {
        // 实名验证判断
        if (this.is_id_card != 0 && this.otherApply != 2) {
          if (this.id_card_name == '') {
            this.$Error('身份证姓名不能为空！')
            return false
          }
          if (this.id_card == '') {
            this.$Error('身份证号不能为空！')
            return false
          } else if (!IdentityCodeValid(this.id_card)) {
            this.$Error('请输入18位有效身份证号！')
            return
          }
        }
        if (this.id_card_front_back != 0 && this.otherApply != 2) {
          if (this.front_img && (!this.$refs.smallUploadImg1.hasOwnProperty('imgList') || this.$refs.smallUploadImg1.imgList.length === 0)) {
            this.id_card_front = this.front_img
          } else {
            this.id_card_front = this.$refs.smallUploadImg1.imgList.length ? this.$refs.smallUploadImg1.imgList[0] : ''
          }
          if (this.back_img && (!this.$refs.smallUploadImg2.hasOwnProperty('imgList') || this.$refs.smallUploadImg2.imgList.length === 0)) {
            this.id_card_back = this.back_img
          } else {
            this.id_card_back = this.$refs.smallUploadImg2.imgList.length ? this.$refs.smallUploadImg2.imgList[0] : ''
          }
          if (this.id_card_front == '') {
            this.$Error('请上传正面身份证！')
            return false
          }
          if (this.id_card_back == '') {
            this.$Error('请上传反面身份证！')
            return false
          }
        }

        if (this.$refs.IDCard) {
          if (!IdentityCodeValid(this.id_card)) {
            this.$Error('请输入18位有效身份证号！')
            return
          }
        }
        if (this.otherApply != 2 && this.balanceName == '') {
          this.$Error('收款人姓名不能为空！')
          return false
        }
      }
      if (this.active == 4) {
        if (this.$refs.showAgreenment) {
          if (!this.mq_agree) {
            this.$Error(this.cashPopData.withdraw_agreement_tips)
            return false
          }
        }
      } else {
        if (this.$refs.showOldAgreenment) {
          if (!this.agree) {
            this.$Error(this.cashPopData.withdraw_agreement_tips)
            return false
          }
        }
      }
      if (this.active == 1) {
        // 支付宝账户去掉验证手机号和邮箱的判断，因为有的支付宝账户是一串字母+数字
        if (!this.alipay_account) {
          this.$Error('支付宝收款账号不能为空！')
          return false
        }
        // if (!m.test(this.alipay_account) && !e.test(this.alipay_account)) {
        //   this.$Error('请填写正确的支付宝账号！')
        //   return false
        // }
      }
      // 通联分账的佣金提现
      let myRemainingCommission = 0
      if (this.cashPopData.tlfz_is_opened == 1) {
        myRemainingCommission = this.cashPopData.tlfz_balance.all_amount
      } else {
        myRemainingCommission = this.cashPopData.remaining_commission
      }

      if (this.money > +myRemainingCommission) {
        if (this.cashPopData.is_balance) {
          this.$Error('输入金额不能大于余额！')
        } else {
          this.$Error('输入金额不能大于佣金金额！')
        }
        return false
      }
      // // console.log(this.money, this.cashPopData.max_tx_money)

      if (
        this.cashPopData.max_tx_money > 0 &&
        this.money > +this.cashPopData.max_tx_money
      ) {
        this.$Error('不能超出最高提现金额！')
        return false
      }
      if (this.money <= 0) {
        this.$Error('输入金额不能小于0！')
        return false
      }
      if (this.cashPopData.is_draw_int == 1) {
        if (
          isNaN(this.money) ||
          this.money % this.cashPopData.withdraw_multiple != 0
        ) {
          this.$Error(
            `请输入${this.cashPopData.withdraw_multiple}的倍数的提现金额！`
          )
          return false
        }
      } else {
        if (this.cashPopData.withdraw_percentage > 0) {
          if (this.money > +this.cashPopData.max_tx_money) {
            this.$Error('输入金额不能大于提现最高金额！')
            return false
          } else if (this.money < +this.cashPopData.min_tx_money) {
            this.$Error('输入金额不能小于提现最低金额！')
            return false
          }
        } else {
          if (
            isNaN(this.money) ||
            this.money < +this.cashPopData.withdraw_start_amount
          ) {
            this.$Error(
              `请输入大于${this.cashPopData.withdraw_start_amount}元的提现金额！`
            )
            return false
          }
        }
      }
      // 验证手机号
      if (this.withdraw_need_phone == 1) {
        if (this.link_mobile == '') {
          this.$Error('请填写手机号！')
          return false
        }
        if (!validateMobile(this.link_mobile)) {
          Toast('请输入正确的手机号码')
          return false
        }
      }
      if (this.active == 3 && this.otherApply != 2) {
        if (this.bank == 0) {
          this.$Error('请选择银行！')
          return false
        }
        if (this.open_bank == '') {
          this.$Error('开户银行不能为空！')
          return false
        }
        if (this.alipay_account == '') {
          this.$Error('收款账号不能为空！')
          return false
        }
      }
      if (this.cashPopData.must_pay_password) {
        this.$Error('请先去会员中心的修改资料里设置支付密码!')
        return false
      }
      if (this.cashPopData.popup_show) {
        this.showPwd = true
        return false
      }
      if (this.active === 6 && this.inToOutParam.isShow) {
        // console.log(this.active, this.inToOutParam.isShow)
        this.handleInToOutClick(this._getBalanceDraw)
      } else {
        this._getBalanceDraw()
      }
    },

    // // 通联验证码弹窗确认提现
    // clickTlConfirm() {
    //   payByBackSMS(this.formTlDialog).then(res => {
    //     if (res.status == 1) {
    //       // console.log(res, '通联支付')
    //       this.$Error('申请成功')
    //       this.showTlDialog = false
    //     } else {
    //       this.$Error(res.msg)
    //     }
    //   })
    // },
    // // 通联验证码弹窗关闭
    // closeTlDialog() {
    //   this.showTlDialog = false
    // },

    in_array(idx) {
      const item = this.dzData.cloud_pay_now_type.find(val => {
        return idx == val
      })
      if (item) return true
    },
    // 输入密码确认
    confirm() {
      this._checkedPayPassword()
    },
    // 验证密码
    _checkedPayPassword() {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)
      const data = { pay_password: this.password }
      checkedPayPassword(data).then(res => {
        if (res.status == 1) {
          if (res.data.status == 1) {
            if (this.active === 6 && this.inToOutParam.isShow) {
              // console.log(this.active, this.inToOutParam.isShow)
              this.handleInToOutClick(this._getBalanceDraw)
            } else {
              this._getBalanceDraw()
            }
          } else {
            this.$Error(res.data.msg)
            setTimeout(() => {
              window.location.reload()
            }, 1000)
          }
        } else {
          this.$Error(res.msg)
          setTimeout(() => {
            window.location.reload()
          }, 1000)
        }
      })
    },
    // TODO 使用广播刷新
    refreshPage() {
        window.$$publish('txRefreshPage', true)
    },
    _getBalanceDraw() {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)
      const data = {
        id_card: this.id_card,
        id_card_name: this.id_card_name,
        id_card_front: this.front_img,
        id_card_back: this.back_img,
        alipay_account: this.alipay_account,
        name: this.balanceName,
        money: this.money,
        type: this.active,
        cloud_type: this.cloud_type,
        bank_id: this.bank,
        open_bank: this.open_bank,
        code: this.code,
        link_mobile: this.link_mobile
      }
        data.id_card_front = this.id_card_front
        data.id_card_back = this.id_card_back
      // 余额提现
      if (this.cashPopData.is_balance) {
        getBalanceDraw(data).then(res => {
          this.$loadingWrap.close()
          if (res.status == 1 && res.data.status == 1) {
            this.$Error(res.data.msg)
            // 获取当前时间
            var myDate = new Date()
            var totalSeconds = Math.round(myDate.getTime() / 1000)
            setTimeout(() => {
              this.refreshPage()
            }, 1000)
            Storage.saveLocal('time_status', totalSeconds)
          } else {
            this.$Error(res.msg)
          }
        })
      } else if (this.cashPopData.is_commission) {
        data.identity = this.cashPopData.identity
        data.wx_account_name = this.wx_account_name
        if (this.dzData.is_mw_dz) {
          data.store_id = this.dzData.store_id
        }
        // 佣金提现
        doTX(data).then(res => {
          this.$loadingWrap.close()
          if (res.status == 1) {
            // 通联分账佣金提现
            // if (this.active == 7) {
            //   this.showTlDialog = true
            //   this.formTlDialog.biz_order_no = res.data.biz_order_no
            //   return false
            // }
            if (res.data.sign_url) {
              window.location.href = res.sign_url
            } else {
              this.$Error(res.data.msg)
              // if (res.data.status == 1) {
              const myDate = new Date()
              const totalSeconds = Math.round(myDate.getTime() / 1000)
              setTimeout(() => {
                // TODO 佣金提现小程序暂定使用广播
                this.refreshPage()
              }, 1000)
              Storage.saveLocal('time_status', totalSeconds)
              // }
            }
          } else {
            this.$Error(res.msg.msg || res.msg)
          }
        })
      } else if (this.cashPopData.is_supplierWithdraw) {
        // 供应商收入提现
        doSupplierWithdraw(data).then(res => {
          this.$loadingWrap.close()
          if (res.status == 1) {
            this.$Error('操作成功')
            const myDate = new Date()
            const totalSeconds = Math.round(myDate.getTime() / 1000)
            setTimeout(() => {
              // TODO 佣金提现小程序暂定使用广播
              this.refreshPage()
            }, 1000)
            Storage.saveLocal('time_status', totalSeconds)
          } else {
            this.$Error(res.msg)
          }
        })
      }
    },
    Jump(path) {
      this.$JumpPath(this, path)
    },
    // 定制  漫威  门店提现  start
    noStore() {
      this.$Error('没有门店，无法提现')
    },
    // 定制  漫威  门店提现  end
  },
  computed: {
    isAgreenment() {
      let pass = false
      if (this.dzData.is_cloud_agreement != 0 && this.dzData.cloud_agreement) {
        pass = true
      }
      return pass
    },
    oldAgreenment() {
      let pass = false
      if (
        this.cashPopData.need_withdraw_apply_agreement != 0 &&
        this.cashPopData.withdraw_apply_agreement
      ) {
        pass = true
      }
      return pass
    },
    // 获取自定义符号
    ...mapGetters(['mSymbol'])
  },
  watch: {
    bank(val) {
      if (val == 0) {
        this.bankName = '请选择银行'
      } else {
        this.bankName = this.cashPopData.bankList[val]
      }
    },
    active(type) {
      this.open_bank = ''
      this.alipay_account = ''
      this.money = ''
      this.balanceName = ''
      // 银联
      if (type == 3) {
        if (this.user_behavior_jd) {
          this.alipay_account = this.user_behavior_jd.bank_code || ''
          this.balanceName = this.user_behavior_jd.name || ''
          this.id_card = this.user_behavior_jd.id_card || ''
          this.open_bank = this.user_behavior_jd.open_bank || ''
        }
      }
      // 微信
      if (type == 2) {
        if (this.user_behavior_wechat) {
          this.balanceName = this.user_behavior_wechat.name || ''
          this.id_card = this.user_behavior_wechat.id_card || ''
        }
      }
      // 支付宝
      if (type == 1) {
        if (this.user_behavior_alipay) {
          this.alipay_account = this.user_behavior_alipay.alipay_account || ''
          this.balanceName = this.user_behavior_alipay.name || ''
          this.id_card = this.user_behavior_alipay.id_card || ''
        }
      }
    },
    cloud_type(type) {
      this.open_bank = ''
      this.alipay_account = ''
      this.money = ''
      this.balanceName = ''
      // 银联
      if (type == 3) {
        if (this.cloud_default_3) {
          if (this.cloud_default_3.alipay_account) {
            this.alipay_account = this.cloud_default_3.alipay_account
          } else if (this.user_behavior_jd) {
            this.alipay_account = this.user_behavior_jd.bank_code
          }
          if (this.cloud_default_3.payee) {
            this.balanceName = this.cloud_default_3.payee
          } else if (this.user_behavior_jd) {
            this.balanceName = this.user_behavior_jd.name
          }
          if (this.cloud_default_3.id_card) {
            this.id_card = this.cloud_default_3.id_card
          } else if (this.user_behavior_jd) {
            this.id_card = this.user_behavior_jd.id_card
          }
        }
      }
      // 微信
      if (type == 2) {
        if (this.cloud_default_2) {
          if (this.cloud_default_2.payee) {
            this.balanceName = this.cloud_default_2.payee
          } else if (this.user_behavior_wechat) {
            this.balanceName = this.user_behavior_wechat.name
          }
          if (this.cloud_default_2.id_card) {
            this.id_card = this.cloud_default_2.id_card
          } else if (this.user_behavior_wechat) {
            this.id_card = this.user_behavior_wechat.id_card
          }
        }
      }
      // 支付宝
      if (type == 1) {
        if (this.cloud_default_1) {
          if (this.cloud_default_1.alipay_account) {
            this.alipay_account = this.cloud_default_1.alipay_account
          } else if (this.user_behavior_alipay) {
            this.alipay_account = this.user_behavior_alipay.alipay_account
          }
          if (this.cloud_default_1.payee) {
            this.balanceName = this.cloud_default_1.payee
          } else if (this.user_behavior_alipay) {
            this.balanceName = this.user_behavior_alipay.name
          }
          if (this.cloud_default_1.id_card) {
            this.id_card = this.cloud_default_1.id_card
          } else if (this.user_behavior_alipay) {
            this.id_card = this.user_behavior_alipay.id_card
          }
        }
      }
    }
  }
})
</script>

<style lang="scss">
@import "src/styles/variables.scss";
.miniprogram-root {
  .samll-upload {
    width: 330px;
    height: 176px;
    .samll-upload-box-item.sfz {
      width: 100%;
      height: 100%;
      margin: 0;
    }
  }
  .samll-upload-box {
    padding-top: 0;
    width: 100%;
    height: 100%;
    .img-wrap, .img-wrap1 {
      width: 100%;
      height: 100%;
    }
  }
}
.cashPop {
  position: relative;
  height: 100%;
  overflow:auto;
  background-color: #f5f5f5;
  .cashPop_close {
    position: relative;
    font-weight: bold;
    font-size: 28px;
    color: #333;
    height: 92px;
    text-align: center;
    padding: 30px;
    background-color: #fff;
    i{
      position: absolute;
      right: 30px;
      top: 50%;
      display: inline-block;
      width: 28px;
      height: 28px;
      background: url("https://img.wifenxiao.com/h5-wfx/images/user/icon_del.png") center
        no-repeat;
      background-size: 100% 100%;
      transform: translateY(-50%);
    }
  }
  .cashCard {
    border-radius: 10px;
    margin: 20px 0;
    background:#fff url('https://img.wifenxiao.com/h5-wfx/images/user/balanceBg.png') center no-repeat;
    background-size: 100% 100%;
    position: relative;
    &-main{
      padding: 50px 50px;
      color: #333;
      .card-wrap-title {
        font-size: 28px;
      }
      .card-wrap-num{
        font-size: 34px;
        margin-top: 30px;
        margin-bottom: 50px;
      }
      .card-wrap-tip {
        font-size: 24px;
      }
      .card-wrap-btn {
        position: absolute;
        right: 50px;
        top: 45px;
        color: $light-blue;
      }
    }
  }

  &-main {
    background-color: #f5f5f5;
    .select-pay-type {
      margin:20px;
      // margin-top: 20px;
      padding: 0 30px;
      border-radius:20px;
      background-color: #fff;
      .pay-title {
        font-weight: normal;
        font-size: 28px;
        height: 100px;
        line-height: 100px;
      }
      .payList {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        div {
          // box-sizing: border-box;
          width: calc(97% / 2);
          // height: 90px;
          line-height: 90px;
          text-align: center;
          border: 2px solid #e9e9e9;
          font-size: 28px;
          color: #666666;
          margin-bottom: 20px;
          // padding: 10px;
          position: relative;
          img {
            display: inline-block;
            width: 60px;
            height: 60px;
            vertical-align: middle;
            margin-right: 10px;
          }
          span {
            font-size: 32px;
          }
          &.active {
            border-color: #f30c23;
            i {
              display: block;
              width: 41px;
              height: 35px;
              background-image: url("https://img.wifenxiao.com/h5-wfx/images/user/select.png");
              background-repeat: no-repeat;
              background-position: 0 0;
              background-size: 100%;
              position: absolute;
              right: -1px;
              bottom: -2px;
            }
          }
        }
      }
      .cloud_pay {
        width: 750px;
        padding: 10px 20px;
        overflow: hidden;
        margin-left: -30px;
        label {
          position: relative;
          display: inline-block;
          float: left;
          width: calc(91% / 3);
          margin-bottom: 10px;
          box-sizing: border-box;
          border: 1px solid #efefef;
          font-size: 28px;
          color: #666;
          padding: 20px;
          text-align: center;
          margin-right: 3%;
          font-weight: 400;
          &.checked {
            border: 1px solid #f30c23;
            position: relative;
          }
          img {
            width: 48px;
            height: 48px;
            margin-right: 10px;
            vertical-align: middle;
          }
        }
      }
    }
    .balance_inputinfo {
      background-color: #fff;
      padding: 0;
      margin: 0;
      border: 0;
      padding-left: 30px;
      margin: 20px!important;
      border-radius:20px;
      font-size: 28px;
      h3 {
        font-size: 28px;
        line-height: 90px;
        font-weight: normal;
      }
      // 上传身份证
      .upload_box{
        display: flex;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        align-items: center;
        padding: 20px 30px 20px 0;
        justify-content: space-between;
        // 外层样式写的有问题 只能这么兼容
        position: relative;
        left: -10px;
        .upload_box_item{
          position: relative;
          width: 330px;
          height: 176px;
          margin-right: 20px;
          background-repeat: no-repeat;
          background-position: center;
          background-size: cover;
          &:first-child{
            background-image: url('https://img.wifenxiao.com/h5-wfx/images/user/idcard_front.png');
          }
          &:last-child{
            margin-right: 0;
            background-image: url('https://img.wifenxiao.com/h5-wfx/images/user/idcard_back.png');
          }
          .upload_image{
            position: absolute;
            left: 0;
            top: 0;
            display: block;
            width: 100%;
            height: 100%;
            opacity: 0;
            z-index: 10;
          }
          img{
            position: absolute;
            left: 0;
            top: 0;
            // bottom: 0;
            // right: 0;
            width: 100%;
            height: 176px;
            object-fit: cover;
            z-index: 9;
          }
          .add-text{
            position: absolute;
            bottom: 0;
            left: 0;
            font-size: 24px;
            color: #fff;
            width: 100%;
            height: 56px;
            line-height: 56px;
            text-align: center;
            background-color: rgba(0,0,0,.4);
            border-radius:0px 0px 10px 10px;
            z-index: 11;
          }
        }
      }
      .money_number {
        padding-bottom: 4px;

        p {
          display: flex;
          align-items: center;
          font-size: 40px;
          line-height: 56px;
          padding-bottom: 30px;
          padding-right: 30px;
          border-bottom: 2px solid #eee;
          b{
            font-weight:bold;
          }
          input {
            border: none;
            outline: none;
          }
        }
        .phone-code {
          margin-top: 30px;
          height: 90px;
          &-input {
            width: 50%;
            float: left;
          }
          &-get {
            color: $light-blue;
            float: right;
            outline: none;
            border: none;
            background: none;
          }
        }
        span {
          line-height: 92px;
          font-size: 26px;
          color: #999;
        }
        .Tips {
          line-height: 40px;
          font-size: 26px;
          color: #999;
          font-weight: normal;
          border: 0;
          margin-top: -10px;
        }
      }
      .inputinfo {
        border: 0;
        padding: 20px 0;
        padding-right: 30px;
        border-radius: 0;
        border-bottom: 1px solid #eee;
        display: flex;
        // justify-content: center;
        align-items: center;
        height: 100%;
        &:last-child {
          border: 0;
        }
        span {
          flex: 3;
          font-size: 28px;
          line-height: 50px;
        }
        input {
          border: none;
          flex: 7;
          // height: 100%;
          text-align: right;
          font-size: 26px;
          color: #333;
        }
      }
      // 定制  门店提现  start
      .formitems {
        border: none;
        line-height: 60px;
        padding: 16px 0;
        padding-right: 30px;
        p {
          color: #333;
          font-size: 24px;
        }
        .colorRed {
          color: #ff0000 !important;
        }
      }
      // 定制  门店提现  end
    }
    .pay-yinhang {
      background-color: #fff;
      border: 0;
      padding: 0;
      padding-left: 30px;
      margin: 0;
      position: relative;
      &.zfbpay {
        margin: 20px;
        border-radius:20px;
      }
      .formitems {
        padding: 16px 0;
        border-bottom: 1px solid #eee;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
        .fi-name {
          // float: left;
          text-align: right;
          color: #333;
          font-size: 28px;
          font-weight: 400;
          line-height: 56px;
          span {
            color: #ff0000 !important;
          }
        }
        .form-controls {
          // float: right;
          // display: flex;
          // justify-content: flex-end;
          .selc-style {
            position: absolute;
            right: 0;
            top: 20px;
            z-index: 10000;
            width: calc(100% - 170px);
            height: 60px;
            text-align: right;
            padding-right: 30px;
            line-height: 56px;
            span {
              // position: absolute;
              display: inline-block;
              right: 50px;
              text-align: right;
              // top: 6px;
              font-size: 26px;
              color: #333;
            }
          }
          select {
            display: inline-block;
            padding: 8px 20px;
            padding-left: 54px;
            border: 1px solid #ccc;
            line-height: 40px;
            font-size: 26px;
            vertical-align: middle;
            color: #333;
            margin-bottom: -6px;
            position: absolute;
            right: 0;
            top: 20px;
            z-index: 10001;
            width: calc(100% - 85px);
            height: 60px;
            opacity: 0;
          }
        }
      }
    }
    .show_tip {
      padding: 20px 30px;
      // background-color: #fafafa;
      .tip_txt {
        display: block;
        font-size: 24px;
        line-height: 44px;
        color: #999;
        .colored {
          color: #ff0909;
        }
      }
    }
    .count_node {
      padding: 0 30px;
      margin-top: 30px;
      span {
        display: block;
        width: auto;
        height: 80px;
        line-height: 80px;
        text-align: center;
        color: #fff;
        border-radius: 80px;
        margin: 0px auto;
        margin: 20px 0;
        font-size: 28px;
        background: linear-gradient(
          -90deg,
          rgba(233, 1, 4, 1),
          rgba(254, 27, 73, 1)
        );
        &.no-store {
          background-image: none;
          width: auto;
          background-color: #ccc;
        }
      }
    }
  }
  .apply_cloud_agreement,
  .agreenment {
    color: #999;
    font-size: 24px;
    width: 100%;
    text-align: left;
    margin-top: 4%;
    padding-left: 30px;
    position: relative;
    display: flex;
    align-items: center;
    p {
      color: #999;
      margin-right: 10px;
    }
    span {
      color: #4088ff;
      margin-right: 10px;
    }
    // input {
    //   border: none;
    //   margin-right: 4px;
    //   margin-top: -4px;
    //   position: absolute;
    //   margin-left: 2px;
    //   border: none;
    //   width: 30px;
    //   height: 30px;
    //   top: 4px;
    //   opacity: 0;
    // }
  }

  .password {
    width: 80%;
    height: 60px;
    display: block;
    margin: 40px auto;
    outline: none;
    border: none;
    border-radius: 5px;
    background-color: #f3f2f2;
  }

  // 通联提现验证码弹窗
  .donation-box{
		.con-box{
			position:relative;
			padding:40px 60px;
		}
		.input-box{
			margin:16px 0;
			font-size:28px;
			label{
				float:left;
				display:block;
				width:150px;
				line-height:76px;
				text-align:right;
				font-weight:normal;
				color: #666666;
			}
			input{
				float:left;
				-webkit-appearance: none;
				width:256px;
				height:76px;
				padding:16px 10px;
				border:2px solid #EDEDED;
				border-radius:6px;
        &.readonly{
          border:0;
        }
			}
		}
    .btn-box{
      display:flex;
      border-top:2px solid #ededed;
      .btn{
        width:50%;
        font-size:28px;
        line-height:94px;
        text-align:center;
        color:#333;
        &.confirm-btn{
          border-left:2px solid #ededed;
          color:#f20b22;
        }
      }
    }
	}
}
.agreement-cont {
  padding: 20px 30px 10px;
  // background-color: #f5f5f5;
  .apply_agreement {
    // margin: 10px 30px;
    // background: #fff;
    text-align: left;
    border-radius: 10px;
    // border: 2px dashed #bfbfbf;
    h3 {
      text-align: center;
      font-weight: bold;
      line-height: 40px;
      padding-top: 18px;
      font-size: 28px;
    }
    .txt {
      font-size: 24px;
      word-wrap: break-word;
      word-break: break-all;
      padding: 20px 16px;
    }
  }
}
.van-popup__close-icon {
  font-size: 44px!important;
}
</style>
